<template>

   <div class="block">
    <el-carousel height="460px" :interval="3000" arrow="always">
      <el-carousel-item v-for="banner in banner_obj" :key="banner.name">
          <img :src="banner.image" alt="">
      </el-carousel-item>
    </el-carousel>
  </div>

</template>

<script>
    export default {
        name: "banner",
        data (){
            return {
                // car_img:[
                //     require('../assets/img/1.jpg'), require('../assets/img/2.jpg'), require('../assets/img/3.jpg'), require('../assets/img/4.jpg')
                // ],
                banner_obj : ''



            }
        },
        created(){
            this.$axios({
                url:this.$settings.base_url+'/home/banners',
                method:'get',
            }).then(response =>{
                this.banner_obj =response.data;
            })
        }
    }
</script>
<style scoped>
    .el-carousel__item{
        width: 100%;

    }

    .el-carousel__item img {
        text-align: center;
        width: 100%;
        height: 460px;
        margin: 0 auto;
        display: block;
        cursor: pointer;


    }





  /*.el-carousel__item:nth-child(2n) {*/
     /*background-color: #99a9bf;*/
  /*}*/

  /*.el-carousel__item:nth-child(2n+1) {*/
     /*background-color: #d3dce6;*/
  /*}*/
</style>